<template>
  <div>
    <el-card>
      区域搜索:
      <el-input
        placeholder="请输入"
        style="width: 200px; margin: 0 20px"
        v-model="params.name"
      ></el-input>
      <el-button type="primary" @click="searchFn">查询</el-button>
    </el-card>
    <el-card>
      <el-popover placement="right" width="400" trigger="click">
        <el-form v-if="show">
          <el-form-item>
            区域名称:<el-input
              placeholder="请输入"
              style="width: 200px; margin: 0 20px"
              maxlength="15"
              show-word-limit
              v-model="data.name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            备注说明:<el-input
              placeholder="请输入备注(不超过40字)"
              style="width: 200px; margin: 0 20px"
              type="textarea"
              maxlength="40"
              show-word-limit
              v-model="data.remark"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="cancelFn">取消</el-button>
            <el-button style="background-color: orange" @click="createFn"
              >创建</el-button
            >
          </el-form-item>
        </el-form>
        <el-button slot="reference" style="background: orange" @click="addFn"
          >新建</el-button
        >
      </el-popover>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="indexId" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="区域名称" width="180">
        </el-table-column>
        <el-table-column prop="nodeCount" label="点位数"> </el-table-column>
        <el-table-column prop="remark" label="备注说明"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAreaManage, getCreateArea ,get} from "@/api/user";
export default {
  data() {
    return {
      show: true,
      tableData: [],
      params: {
        pageIndex: 1, // 当前默认显示第一页数据
        pageSize: 10, // 每页条数是5条
        name: "",
      },
      data: {
        name: "",
        remark: "",
      },
    };
  },
  methods: {
    addFn() {
      this.show = true;
    },
    cancelFn() {
      this.show = false;
    },
    async createFn() {
      const res = await getCreateArea(this.data);
      console.log(res);
      this.show = false;
      this.getAreaManage();
    },
    async searchFn() {
      console.log(this.params.name);
      const res = await getAreaManage(this.params);
      //console.log(res);
      this.tableData = res.data.currentPageRecords.map((item, index) => ({
        ...item,
        indexId: index + 1,
      }));
      console.log(this.tableData, 9988);
    },
    async getAreaManage() {
      const res = await getAreaManage(this.params);
      console.log(res);
      this.tableData = res.data.currentPageRecords.map((item, index) => ({
        ...item,
        indexId: index + 1,
      }));
    },
  },
  created() {
    this.getAreaManage();
    this.createFn();
  },
};
</script>

<style></style>
